<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius:15px 30px 10px 30px;
    }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
<!-- 元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：

 div{border-radius: 20px 10px 15px 30px;}
 值顺序为 左上-右上-右下-左下 
 
 也可以分开写：
div{
   border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}
-->

<!-- 如果四个圆角都为10px;可以这么写：

div{ border-radius:10px;} -->

<!-- 
    如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：

div{ border-radius:10px 20px;}
 -->

 <!--
     需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }
 也可以写为百分比50%
 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }
  -->